<!-- <template>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const message = ref('Hello, Vue 3!');
onMounted(() => {
    // Your code here
});

// 在组件卸载前执行的操作
onUnmounted(() => {
    // Your code here
}); -->
<!-- </script> -->
<template>
  <div style="width: 1000px;">
    <div style="width: 1000px; background-color:  #0079fe;height: 40px;">
        <h2>系统通知列表</h2>
    </div>
    <!-- 时间筛选 -->
    <div style="margin-bottom: 10px;">
      <span style="margin-right: 200px;">时间：</span>
      <el-radio-group v-model="timeFilter" style="margin-left: 100px;">
        <el-radio label="all">全部</el-radio>
        <el-radio label="threeYears">经三年</el-radio>
        <el-radio label="oneYear">近一年</el-radio>
        <el-radio label="halfYear" :checked="true">近半年</el-radio>
        <el-radio label="threeMonths">近三个月</el-radio>
        <el-radio label="oneMonth">近一个月</el-radio>
        <el-radio label="oneWeek">近一周</el-radio>
      </el-radio-group>
    </div>
    <!-- 通知时间搜索和操作按钮 -->
    <div style="margin-bottom: 10px; display: flex; align-items: center; ">
      <span style="margin-right: 10px;">通知时间：</span>
      <el-input v-model="searchTime" placeholder="请输入通知时间" style="width: 200px; margin-right: 10px;"></el-input>
      <el-button @click="select()">查询</el-button>
      <el-button @click="addNotification">新增</el-button>
    </div>
    <!-- 通知表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="title" label="编号" width="80" />
      <el-table-column prop="content" label="通知名" width="200" />
      <el-table-column prop="publish_time" label="通知时间" width="250" />
      <el-table-column prop="publisher_id" label="通知人" width="100" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="deleteNotification(scope.row)">删除</el-button>
          <el-button @click="viewNotification(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="text-align: center; margin-top: 10px;">
      <el-button @click="prevPage">上一页</el-button>
      <el-button @click="nextPage">下一页</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
const message = ref('Hello, Vue 3!');
// 模拟表格数据
const tableData = ref([]);

// 时间筛选值
const timeFilter = ref('halfYear');
// 通知时间搜索值
const searchTime = ref('');
// 模拟分页相关，这里简单示例，实际需结合后端数据处理
const pageSize = 4;
const currentPage = ref(1);

// 查询通知方法

// 新增通知方法

// 删除通知方法


// 查看通知方法
function select(){
    getdata()
}
function getdata() {
  axios.get('http://127.0.0.1:8000/system/select/',{
    params:{
        publish_time:searchTime.value
    }
  })
  .then(res => {
    tableData.value = res.data.data; // 数据结构已与表格匹配
    console.log(tableData.value);
    //  total.value = res.data.total
  })
  .catch(err => {
    console.error(err);
  });
}
// 上一页方法
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
    // 这里可添加根据页码重新获取数据逻辑
  }
};

// 下一页方法
const nextPage = () => {
  // 这里可添加判断是否到最后一页逻辑
  currentPage.value++;
  // 并添加根据页码重新获取数据逻辑
};
onMounted(() => {
    // Your code here
    getdata()
});

// 在组件卸载前执行的操作
onUnmounted(() => {
    // Your code here
});

</script>

<style scoped>
.el-table__header {
  background-color: #1989fa;
  color: white;
}

</style>
